<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="200px" style="margin-left: -135px;">

    <el-form-item >
      <span slot="label"><span style="color: #f56c6c;font-size: 14px;margin-bottom: 20px">&nbsp *</span >&nbsp问题一</span>
      <el-select v-model="user.securityQuestionOne" placeholder="密保问题选择" style="width:80%;" @change="showValue()">
        <el-option
          v-for="dict in dict.type.yh_security_question_one"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>

      </el-select>
    </el-form-item>
    <el-form-item label="答案一" prop="securityAnswerOne" >
      <el-input v-model="user.securityAnswerOne" placeholder="请输入问题一密保答案"  style="width:80%;" />
    </el-form-item>


    <el-form-item >
      <span slot="label"><span style="color: #f56c6c;font-size: 14px;margin-bottom: 20px">*</span >&nbsp问题二</span>
      <el-select v-model="user.securityQuestionTwo" placeholder="密保问题选择" style="width:80%; " @change="showValue()">
        <el-option
          v-for="dict in dict.type.yh_security_question_one"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>

      </el-select>
    </el-form-item>
    <el-form-item label="答案二" prop="securityAnswerTwo">
      <el-input v-model="user.securityAnswerTwo" placeholder="请输入问题二密保答案"  style="width:80%;"  />
    </el-form-item>

    <el-form-item >
      <span slot="label"><span style="color: #f56c6c;font-size: 14px;margin-bottom: 20px">*</span >&nbsp问题三</span>
      <el-select v-model="user.securityQuestionThree" placeholder="密保问题选择" style="width:80%;"  @change="showValue()">
        <el-option
          v-for="dict in dict.type.yh_security_question_one"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>

      </el-select>
    </el-form-item>
    <el-form-item label="答案三" prop="securityAnswerThree">
      <el-input v-model="user.securityAnswerThree" placeholder="请输入问题三密保答案"  style="width:80%;"  />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {updateUserProfile} from "@/api/system/user";


export default {
  props: {
    user: {
      type: Object
    }
  },
   name:"SysUser",
   dicts:['yh_security_question_one',
     'yh_security_question_two',
     'yh_security_question_three'
   ],

  data() {
    const equalToProtect = (rule, value, callback) => {

        callback();

    };


    return {

   /*   form: {},*/
      // 表单校验
      rules: {
        securityAnswerOne: [
          {required: true, message: "密保答案不能为空", trigger: "blur"},

        ],
        securityQuestionOne: [
          {required: true, message: "密保问题不能为空", trigger: "blur"},

        ],
        securityAnswerTwo: [
          {required: true, message: "密保答案不能为空", trigger: "blur"},


        ],
        securityQuestionTwo: [
          {required: true, message: "密保问题不能为空", trigger: "blur"},


        ],
        securityAnswerThree: [
          {required: true, message: "密保答案不能为空", trigger: "blur"},
        ],
        securityQuestionThree: [
          {required: true, message: "密保问题不能为空", trigger: "blur"},
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid & this.showValue()==true) {
          updateUserProfile(this.user).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    showValue(){
      let a = this.user.securityQuestionOne
      let b = this.user.securityQuestionTwo
      let c = this.user.securityQuestionThree
      if (a==b || b==c || c==a ){
        this.$modal.msgWarning("存在重复密保问题");
        return false
      }
      else {
        return true
      }


    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>
